import React from "react";
import { uniqueId } from "lodash";
import type { SVGProps } from "react";

const Edge = (props: SVGProps<SVGSVGElement>) => {
  const clipPathId = uniqueId("clip-path-");
  const fillPathA = uniqueId("fill-path-");
  const fillPathB = uniqueId("fill-path-");
  const fillPathC = uniqueId("fill-path-");
  const fillPathD = uniqueId("fill-path-");
  const fillPathE = uniqueId("fill-path-");
  const fillPathF = uniqueId("fill-path-");

  return (
    <svg fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
      <rect width="32" height="32" fill="white" />
      <g clipPath={`url(#${clipPathId})`}>
        <path
          d="M24.8602 21.3711C24.5651 21.5244 24.2609 21.6593 23.9492 21.775C22.9623 22.1423 21.9172 22.3287 20.8641 22.325C16.7992 22.325 13.2586 19.532 13.2586 15.9398C13.2639 15.4588 13.3972 14.9879 13.645 14.5756C13.8927 14.1632 14.2458 13.8243 14.668 13.5938C10.9898 13.7484 10.0445 17.5812 10.0445 19.8242C10.0445 26.1836 15.8969 26.8195 17.1602 26.8195C17.8391 26.8195 18.8617 26.6219 19.4805 26.4242L19.5922 26.3898C21.9601 25.5715 23.9787 23.9712 25.3156 21.8523C25.3545 21.788 25.3712 21.7126 25.3631 21.6379C25.355 21.5631 25.3227 21.493 25.271 21.4384C25.2193 21.3838 25.1511 21.3477 25.0769 21.3355C25.0027 21.3233 24.9266 21.3358 24.8602 21.3711Z"
          fill={`url(#${fillPathA})`}
        />
        <path
          opacity="0.35"
          d="M24.8602 21.3711C24.5651 21.5244 24.2609 21.6593 23.9492 21.775C22.9623 22.1423 21.9172 22.3287 20.8641 22.325C16.7992 22.325 13.2586 19.532 13.2586 15.9398C13.2639 15.4588 13.3972 14.9879 13.645 14.5756C13.8927 14.1632 14.2458 13.8243 14.668 13.5938C10.9898 13.7484 10.0445 17.5812 10.0445 19.8242C10.0445 26.1836 15.8969 26.8195 17.1602 26.8195C17.8391 26.8195 18.8617 26.6219 19.4805 26.4242L19.5922 26.3898C21.9601 25.5715 23.9787 23.9712 25.3156 21.8523C25.3545 21.788 25.3712 21.7126 25.3631 21.6379C25.355 21.5631 25.3227 21.493 25.271 21.4384C25.2193 21.3838 25.1511 21.3477 25.0769 21.3355C25.0027 21.3233 24.9266 21.3358 24.8602 21.3711Z"
          fill={`url(#${fillPathB})`}
        />
        <path
          d="M14.0836 25.7367C13.3186 25.2616 12.6556 24.6394 12.1328 23.9062C11.5358 23.0891 11.1249 22.1513 10.9289 21.1585C10.7328 20.1657 10.7564 19.1421 10.998 18.1594C11.2396 17.1767 11.6933 16.2588 12.3273 15.47C12.9613 14.6813 13.7602 14.0409 14.668 13.5937C14.943 13.4648 15.3984 13.2414 16.0086 13.25C16.4379 13.2533 16.8607 13.3558 17.2438 13.5497C17.627 13.7435 17.9601 14.0232 18.2172 14.3671C18.563 14.8321 18.7525 15.3947 18.7586 15.9742C18.7586 15.957 20.8641 9.13354 11.8836 9.13354C8.11093 9.13354 5.00859 12.7085 5.00859 15.8539C4.99358 17.5153 5.3488 19.1593 6.04843 20.6664C7.19421 23.1061 9.19592 25.0403 11.6736 26.1017C14.1512 27.1631 16.9324 27.2779 19.4891 26.4242C18.5933 26.7071 17.6469 26.7921 16.7151 26.6734C15.7833 26.5547 14.8884 26.2351 14.0922 25.7367H14.0836Z"
          fill={`url(#${fillPathC})`}
        />
        <path
          opacity="0.41"
          d="M14.0836 25.7367C13.3186 25.2616 12.6556 24.6394 12.1328 23.9062C11.5358 23.0891 11.1249 22.1513 10.9289 21.1585C10.7328 20.1657 10.7564 19.1421 10.998 18.1594C11.2396 17.1767 11.6933 16.2588 12.3273 15.47C12.9613 14.6813 13.7602 14.0409 14.668 13.5937C14.943 13.4648 15.3984 13.2414 16.0086 13.25C16.4379 13.2533 16.8607 13.3558 17.2438 13.5497C17.627 13.7435 17.9601 14.0232 18.2172 14.3671C18.563 14.8321 18.7525 15.3947 18.7586 15.9742C18.7586 15.957 20.8641 9.13354 11.8836 9.13354C8.11093 9.13354 5.00859 12.7085 5.00859 15.8539C4.99358 17.5153 5.3488 19.1593 6.04843 20.6664C7.19421 23.1061 9.19592 25.0403 11.6736 26.1017C14.1512 27.1631 16.9324 27.2779 19.4891 26.4242C18.5933 26.7071 17.6469 26.7921 16.7151 26.6734C15.7833 26.5547 14.8884 26.2351 14.0922 25.7367H14.0836Z"
          fill={`url(#${fillPathD})`}
        />
        <path
          d="M18.0969 17.7875C18.0195 17.8734 17.8047 18.0023 17.8047 18.2687C17.8047 18.4922 17.9508 18.7156 18.2172 18.8961C19.4461 19.7555 21.775 19.6352 21.7836 19.6352C22.6997 19.6346 23.5989 19.3882 24.3875 18.9219C25.1814 18.4575 25.8401 17.7937 26.2984 16.9963C26.7566 16.1989 26.9985 15.2955 27 14.3758C27.0258 12.4508 26.3125 11.1703 26.0289 10.6031C24.1984 7.04531 20.2711 5 16 5C13.1092 4.99971 10.3345 6.13738 8.27601 8.16694C6.2175 10.1965 5.04065 12.9548 5 15.8453C5.04297 12.7086 8.1625 10.1734 11.875 10.1734C12.1758 10.1734 13.8945 10.1992 15.4844 11.0328C16.6013 11.5878 17.5263 12.4649 18.1398 13.5508C18.6641 14.4617 18.7586 15.6219 18.7586 16.0859C18.7586 16.55 18.5266 17.2289 18.0883 17.7961L18.0969 17.7875Z"
          fill={`url(#${fillPathE})`}
        />
        <path
          d="M18.0969 17.7875C18.0195 17.8734 17.8047 18.0023 17.8047 18.2687C17.8047 18.4922 17.9508 18.7156 18.2172 18.8961C19.4461 19.7555 21.775 19.6352 21.7836 19.6352C22.6997 19.6346 23.5989 19.3882 24.3875 18.9219C25.1814 18.4575 25.8401 17.7937 26.2984 16.9963C26.7566 16.1989 26.9985 15.2955 27 14.3758C27.0258 12.4508 26.3125 11.1703 26.0289 10.6031C24.1984 7.04531 20.2711 5 16 5C13.1092 4.99971 10.3345 6.13738 8.27601 8.16694C6.2175 10.1965 5.04065 12.9548 5 15.8453C5.04297 12.7086 8.1625 10.1734 11.875 10.1734C12.1758 10.1734 13.8945 10.1992 15.4844 11.0328C16.6013 11.5878 17.5263 12.4649 18.1398 13.5508C18.6641 14.4617 18.7586 15.6219 18.7586 16.0859C18.7586 16.55 18.5266 17.2289 18.0883 17.7961L18.0969 17.7875Z"
          fill={`url(#${fillPathF})`}
        />
      </g>
      <defs>
        <linearGradient
          id={fillPathA}
          x1="10.0445"
          y1="20.2109"
          x2="25.3758"
          y2="20.2109"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#0C59A4" />
          <stop offset="1" stopColor="#114A8B" />
        </linearGradient>
        <radialGradient
          id={fillPathB}
          cx="0"
          cy="0"
          r="1"
          gradientUnits="userSpaceOnUse"
          gradientTransform="translate(18.5094 20.3265) scale(8.19844 7.78852)"
        >
          <stop offset="0.7" stopOpacity="0" />
          <stop offset="0.9" stopOpacity="0.5" />
          <stop offset="1" />
        </radialGradient>
        <linearGradient
          id={fillPathC}
          x1="18.1227"
          y1="13.5593"
          x2="8.55781"
          y2="23.9835"
          gradientUnits="userSpaceOnUse"
        >
          <stop stopColor="#1B9DE2" />
          <stop offset="0.2" stopColor="#1595DF" />
          <stop offset="0.7" stopColor="#0680D7" />
          <stop offset="1" stopColor="#0078D4" />
        </linearGradient>
        <radialGradient
          id={fillPathD}
          cx="0"
          cy="0"
          r="1"
          gradientUnits="userSpaceOnUse"
          gradientTransform="translate(11.0633 22.0961) rotate(-81.3844) scale(12.3222 9.95513)"
        >
          <stop offset="0.8" stopOpacity="0" />
          <stop offset="0.9" stopOpacity="0.5" />
          <stop offset="1" />
        </radialGradient>
        <radialGradient
          id={fillPathE}
          cx="0"
          cy="0"
          r="1"
          gradientUnits="userSpaceOnUse"
          gradientTransform="translate(7.22492 9.06622) rotate(92.2906) scale(17.4077 37.0747)"
        >
          <stop stopColor="#35C1F1" />
          <stop offset="0.1" stopColor="#34C1ED" />
          <stop offset="0.2" stopColor="#2FC2DF" />
          <stop offset="0.3" stopColor="#2BC3D2" />
          <stop offset="0.7" stopColor="#36C752" />
        </radialGradient>
        <radialGradient
          id={fillPathF}
          cx="0"
          cy="0"
          r="1"
          gradientUnits="userSpaceOnUse"
          gradientTransform="translate(25.6302 11.643) rotate(73.7398) scale(8.36172 6.79975)"
        >
          <stop stopColor="#66EB6E" />
          <stop offset="1" stopColor="#66EB6E" stopOpacity="0" />
        </radialGradient>
        <clipPath id={clipPathId}>
          <rect
            width="22"
            height="22"
            fill="white"
            transform="translate(5 5)"
          />
        </clipPath>
      </defs>
    </svg>
  );
};

export default Edge;
